<template>
  <div v-if="isInner ? fielsStatus === 1 : (!hasRewardPersonNum && fielsStatus === 1) ">
    <div class="activity-title-wrapper" v-if="!isInner">
      <span class="activity-circle circle-red"></span>
      <span class="activity-title-text">冲刺排行榜&nbsp;&nbsp;&nbsp;&nbsp;快来拿大奖</span>
      <span class="activity-circle circle-red"></span>
    </div>

  <section class="rank-wrapper" >
    <div class="rank-header" :inner="isInner">
      <template>
        <span v-show="fielsStatus !== 2" v-if="!isInner" class="text-time">{{timerText}}</span>
        <div class="acti_entry_timer" v-if="timerresult">
          <template v-if="dayNum > 0">
            <span class="week-time">{{timerresult.substr(0,1)}}</span>
            <span class="timer-text">天</span>
          </template>
          <template v-else>
            <span class="week-time">{{timerresult.substr(2,2)}}</span>
            <span class="week-colon">:</span>
            <span class="week-time">{{timerresult.substr(5,2)}}</span>
            <span class="week-colon">:</span>
            <span class="week-time">{{timerresult.substr(8,2)}}</span>
          </template>
        </div>
        <span v-show="fielsStatus !== 2" v-if="isInner" class="text-time">{{timerText}}</span>
      </template>
      <router-link tag="span" :to="{name: 'TeamRank'}" class="right pointer activity-look-more">查看活动详情></router-link>
      <div class="middle-text" v-if="fielsStatus !==2">
        <p v-if="!isInner">T{{myTeamName}}战队排行榜</p>
        <p v-else>T{{teamProp ? teamProp : myTeamName}}战队冲榜信息</p>
      </div>
    </div>
    <ul class="no-content bg-white" v-if="hasRewardPersonNum">
      该活动暂无数据！
    </ul>
    <ul class="rank-content-box" v-else>
      <li class="title li_item">
        <span class="li_item_1">排名</span>
        <span class="li_item_2">昵称</span>
        <span class="li_item_3">手机号码</span>
        <span class="li_item_4">当前消费额</span>
      </li>
      <template v-for="(item, index) in currentTeamRankList['rankDetailVOS'].slice(0, showNum)">
        <li :class="{'li_item' : true, 'own' : (isSameTeam ? (myrank === item.rank) : false)}" :key="index">
          <span class="li_item_1">
            <i class="el-icon-star-on rank_item"
            :class="{'rank_item_1': item.rank === 1, 'rank_item_2': item.rank === 2, 'rank_item_3': item.rank === 3}"
            v-if="item.rank === 1 || item.rank === 2 || item.rank === 3"><em class="rank_num">{{item.rank}}</em></i>
            <template v-else>
              {{item.rank}}
            </template>
          </span>
          <span class="li_item_2">{{item.username | nicknameReplace(isSameTeam ? (myrank === item.rank) : false)}}<em v-if="isSameTeam ? (myrank === item.rank) : false">(我)</em></span>
          <span class="li_item_3">{{item.mobile | phoneReplace}}</span>
          <span class="li_item_4">¥{{item.amount | floatPrices}}</span>
        </li>
      </template>
      <li class="own li_item" v-if="isSameTeam && myrank > showNum">
        <span class="li_item_1">{{myRankData.rank}}</span>
        <span class="li_item_2">{{myRankData.username}}(我)</span>
        <span class="li_item_3">{{myRankData.mobile | phoneReplace}}</span>
        <span class="li_item_4">¥{{myRankData.amount | floatPrices}}</span>
      </li>
    </ul>
  </section>
  </div>
</template>

<script>
import { countDown } from '@/tool/tool'
export default {
  name: 'TeamRank',
  props: {
    isInner: {
      type: Boolean,
      default: false
    },
    showNum: {
      type: Number,
      default: 5
    },
    fielsStatus: {
      type: Number
    },
    rankActivityList: {
      type: Object,
      default: () => {}
    },
    teamProp: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      globalTimer: null, // 计时器
      timerresult: '',
      timerText: ''
      // fielsStatus: 0 // 活动状态
    //   activity: {'overRanks': [], 'openRanks': [{'startTime': '2018-12-06 10: 52: 32', 'endTime': '2018-12-22 22: 52: 44', 'levelRankDetail': [{'teamName': '1', 'level': [1, 2], 'rankDetailVOS': [{'rank': 1, 'amount': 2000, 'mobile': '15757185394', 'username': 'allan'}, {'rank': 2, 'amount': 1000, 'mobile': '15757185388', 'username': '456789'}, {'rank': 3, 'amount': 800, 'mobile': '15757185389', 'username': '111111'}]}, {'teamName': '2', 'level': [3, 4], 'rankDetailVOS': [{'rank': 1, 'amount': 2000, 'mobile': '15757185333', 'username': '33333'}]}, {'teamName': '3', 'level': [0, 5], 'rankDetailVOS': [{'rank': 1, 'amount': 2000, 'mobile': '15757185394', 'username': 'allan'}]}], 'myRank': {'rank': 2, 'amount': 3000, 'mobile': '15757185394', 'username': '楼天锡', 'level': 5}}]}
    }
  },
  computed: {
    test () {
      return this.fielsStatus === 1 && !this.hasRewardPersonNum && !this.isInner
    },
    hasRewardPersonNum () {
      return this.currentTeamRankList && this.currentTeamRankList['rankDetailVOS'] && !this.currentTeamRankList['rankDetailVOS'].length
    },
    dayNum () {
      return (this.timerresult && this.timerresult.substr(0, 1) - 0) || 0
    },
    myRankData () {
      if (!('endTime' in this.rankActivityList)) { return }
      return this.rankActivityList && this.rankActivityList['myRank']
    },
    loginStatus () {
      return this.$store.getters.loginStatus
    },
    myTeamName () {
      let teamName
      // const list = [{1: [1, 2]}, {2: [3, 4]}, {3: [0, 5]}]
      const list = new Map([
        [[1, 2], 1],
        [[3, 4], 2],
        [[0, 5], 3]
      ])
      const myLevel = (this.myRankData && this.myRankData.level) || (this.loginStatus === 1 ? this.$store.state.user.level - 0 : 1)
      // switch (myLevel) {
      //   case 1:
      //   case 2: teamName = 1; break
      //   case 3:
      //   case 4: teamName = 2; break
      //   case 0:
      //   case 5: teamName = 3; break
      // }
      let lists = [...list]
      lists.map(([key, value]) => {
        if (key.includes(myLevel)) {
          teamName = value
        }
      })
      // console.log(action)
      return teamName
    },
    currentTeamRankList () {
      let list = this.rankActivityList && this.rankActivityList.levelRankDetail && this.rankActivityList.levelRankDetail.filter((team, index) => {
        return team['teamName'] === (this.teamProp ? this.teamProp : this.myTeamName)
      })
      // && list[0]['rankDetailVOS'] && list[0]['rankDetailVOS']) || []
      return (list && list[0]) || []
    },
    isSameTeam () {
      return (this.currentTeamRankList && this.currentTeamRankList.teamName) === this.myTeamName || false
    },
    myrank () {
      return (this.myRankData && this.myRankData.rank) || -1
    }
  },
  methods: {
    hanleTimer () {
      if (!('endTime' in this.rankActivityList)) { return }
      // 活动已结束
      // 样式
      let startTimeParm = this.rankActivityList.startTime
      let endTimeParm = this.rankActivityList.endTime
      const starTimeStamp = (new Date(startTimeParm.replace(/-/g, '/'))).getTime()
      const endTimeStamp = (new Date(endTimeParm.replace(/-/g, '/'))).getTime()
      let nowTime = (new Date()).getTime()
      // 活动开始
      if (nowTime > starTimeStamp && nowTime <= endTimeStamp) {
        this.timerText = '距结束'
        // this.fielsStatus = 1
        this.startCountFn(endTimeParm)
        return
      }
      // 活动还未开始
      if (nowTime < starTimeStamp) {
        this.timerText = '距开始'
        // this.fielsStatus = 0
        this.startCountFn(startTimeParm)
      }
    },
    // 倒计时 2018-09-10 2018-09-30
    startCountFn (timeParm) {
      let vm = this
      clearInterval(vm.globalTimer)
      vm.globalTimer = null
      vm.globalTimer = setInterval(function () {
        vm.timerresult = countDown(timeParm)
        // 剩余时间<=0
        if (vm.timerresult + '' === 'false') {
          clearInterval(vm.globalTimer)
          vm.globalTimer = null
          setTimeout(() => {
            vm.hanleTimer()
          }, 800)
        }
      }, 1000)
    }
  },
  mounted () {
    console.log('mounted')
    this.hanleTimer()
  },
  activated () {
    console.log('activated')
    this.hanleTimer()
  },
  filters: {
    nicknameReplace (value, isMe) {
      if (isMe || (value && value.length === 1)) { return value }
      let len = value.length
      let hiddenStr = value.substring(2, len)
      if (len === 2) {
        return value.replace(/.{0,1}$/, '*')
      } else if (len > 2) {
        return value.replace(hiddenStr, '****')
      }
    }
  },
  watch: {
    currentTeamRankList: {
      deep: true,
      handler (value, old) {
        this.hanleTimer()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.rank-wrapper{
  margin-bottom: 30px;
  .rank-header{
    height: 70px;
    line-height: 70px;
    background:rgba(227,57,57,1);
    border-radius:10px 10px 0px 0px;
    color: #ffffff;
    padding: 0 25px 0 36px;
  }
}
.rank-header{
  position: relative;
  // 倒计时
  .text-time{
    float: left;
    margin-right: 10px;
  }
  .acti_entry_timer{
    display:inline-block;
    float: left;
    // position: absolute;
    margin-top: 16px;
    line-height: 30px;
    .timer-text{
      color:#fff;
      // line-height:53px;
      font-size:16px;
      vertical-align: middle;
    }
    .week-time{
      font-family: PingFangSC-Semibold, Microsoft YaHei;
      font-weight: 600;
      background: #ffffff;
      border-radius: 4px;
      width: 42px;
      height: 35px;
      display: inline-block;
      vertical-align: middle;
      color: #000;
      font-size: 20px;
      line-height: 35px;
      text-align: center;
      letter-spacing: 2px;
    }
    .week-colon {
      font-size: 20px;
      line-height: 40px;
      vertical-align: middle;
      display: inline-block;
    }
  }
  .middle-text{
    width: 40%;
    margin: 0 30%;
    // padding: 10px 0;
    text-align: center;
    line-height: 20px;
    font-size:20px;
    line-height: 70px;
  }
  .title{
    font-size: 20px;
    line-height: 28px;
  }
  .small-tit{
    display: inline-block;
    color: #FFBEBE;
    font-size: 14px;
    line-height: 20px;
  }
  &[inner]{
    border-radius: 20px 20px 0 0;
    .text-time{
      float: right;
    }
    .acti_entry_timer{
      float: right;
    }
    .middle-text{
      position: absolute;
      left: 0;
      margin: 0 3%;
      text-align: left;
      line-height: 70px;
    }
    .right{
      display: none;
    }
  }
}
.activity-look-more{
  height: 38px;
  line-height: 38px;
  padding: 0 30px;
  border-radius: 20px;
  font-size:16px;
  color: #333333;
  background: #fff;
  margin-top: 16px;
}
.rank-content-box{
  position: relative;
  // width: 1178px;
  box-sizing: border-box;
  margin: 0 11px;
  box-shadow: 0px 0px 15px 0px rgba(226, 56, 57, 0.46);
  &:before{
    position: absolute;
    content: '';
    left: -11px;
    border-top: 10px solid #C11A1A;
    border-left: 6px solid transparent;
    border-right: 6px solid #C11A1A;
    border-bottom: 10px solid transparent;
    width: 0;
    height: 0;
  }
  &:after{
    position: absolute;
    top: 0;
    right: -11px;
    content: '';
    border-top: 10px solid #C11A1A;
    border-left: 6px solid #C11A1A;
    border-right: 5px solid transparent;
    border-bottom: 10px solid transparent;
    width: 0;
    height: 0;
  }
  ul{
    padding: 0;
  }
  .li_item{
    line-height: 50px;
    font-size:16px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px inset rgba(213,213,213,0.5);
    &_1{
      width: 9.68%;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      height: 50px;
    }
    &_2{
      display: inline-block;
      padding-left: 17.52%;
      padding-right: 0.83%;
      width: 23.78%;
    }
    &_3{
      display: inline-block;
      width: 24.37%;
    }
    &_4{
      display: inline-block;
      width: 10%;
      text-align: right;
    }
  }
  .rank_item{
    font-size: 40px;
    width: 50px;
    position: relative;
    padding-top: 5px;
    &_1{
      color:#DA1F1F;
    }
    &_2{
      color: #FD7615;
    }
    &_3{
      color: #FFC300;
    }
  }
  .rank_num{
    position: absolute;
    color: #fff;
    font-size: 18px;
    top: 42%;
    left: 39%;
  }
  .title{
    font-size:18px;
    color:rgba(32,32,32,1);
    background:rgba(246,246,246,1);
    span{
      font-weight: 600;
    }
  }
  .own{
    background: #FFF9D4;
  }
}
</style>
